
const topo = {}
const colorInactive = '#78909C'
const colorActiveEdgeGw = '#01579B'
const colorActiveCenterGw = '#FCE4EC'
const colorActiveGroup = '#004D40'
const colorActiveTerminal = '#1A237E'

export const devTypeEGateway = 'E-Gateway'
export const devTypeCGateway = 'C-Gateway'
export const devTypeMCGroup = 'MC-Group'
export const devTypeTerminal = 'Terminal'

topo.edgeGwNodeDefault = {
  type: 'modelRect',
  description: '边缘网关',
  size: [48, 24],
  style: {
    radius: 5,
    stroke: '#263238',
    fill: colorInactive,
    lineWidth: 1,
    fillOpacity: 1,
  },
  // label configurations
  labelCfg: {
    style: {
      fill: '#000000',
      fontSize: 6,
    },
    offset: 0,
  },
  descriptionCfg: {
    style: {
      fill: '#FFAB00',
      fontSize: 3,
    },
    paddingTop: -15,
  },
  // left rect
  preRect: {
    show: false,
  },
  // configurations for the icon
  logoIcon: {
    // whether to show the icon
    show: true,
    x: 0,
    y: 0,
    // the image url for the icon, string type
    img: require('@/assets/star.svg'),
    width: 6,
    height: 6,
    // adjust the offset along x-axis for the icon
    offset: -6,
  },
  // configurations for state icon
  stateIcon: {
    // whether to show the icon
    show: true,
    x: 0,
    y: 0,
    // the image url for the icon, string type
    img: require('@/assets/ok.svg'),
    width: 4,
    height: 4,
    // adjust hte offset along x-axis for the icon
    offset: -5,
  },

  // type: 'circle',
  devType: devTypeEGateway,
  // size: 68,
  // style: {
  //   radius: 10,
  //   lineWidth: 1,
  //   stroke: '#263238',
  //   fill: colorInactive,
  // },
}

topo.centerGwNodeDefault = {
  type: 'diamond',
  devType: devTypeCGateway,
  size: [48, 48],
  style: {
    lineWidth: 1,
    stroke: '#FCE4EC',
    fill: colorInactive,
  },
}

topo.groupNodeDefault = {
  type: 'modelRect',
  description: '多播终端组',
  size: [48, 12],
  style: {
    radius: 2,
    stroke: '#1B5E20',
    fill: colorInactive,
    lineWidth: 1,
    fillOpacity: 1,
  },
  // label configurations
  labelCfg: {
    style: {
      fill: '#000000',
      fontSize: 6,
    },
    offset: 0,
  },
  descriptionCfg: {
    style: {
      fill: '#FFAB00',
      fontSize: 3,
    },
    paddingTop: -15,
  },
  // left rect
  preRect: {
    show: false,
  },
  // configurations for the icon
  logoIcon: {
    // whether to show the icon
    show: true,
    x: 0,
    y: 0,
    // the image url for the icon, string type
    img: require('@/assets/star.svg'),
    width: 6,
    height: 6,
    // adjust the offset along x-axis for the icon
    offset: -6,
  },
  // configurations for state icon
  stateIcon: {
    // whether to show the icon
    show: true,
    x: 0,
    y: 0,
    // the image url for the icon, string type
    img: require('@/assets/ok.svg'),
    width: 4,
    height: 4,
    // adjust hte offset along x-axis for the icon
    offset: -5,
  },
  devType: devTypeMCGroup,
}

topo.terminalNodeDefault = {
  type: 'modelRect',
  description: '采样终端',
  size: [80, 10],
  style: {
    radius: 5,
    stroke: '#69c0ff',
    fill: '#ffffff',
    lineWidth: 1,
    fillOpacity: 1,
  },
  // label configurations
  labelCfg: {
    style: {
      fill: '#000000',
      fontSize: 3,
    },
    offset: 6,
  },
  descriptionCfg: {
    style: {
      fill: '#ffffff',
      fontSize: 3,
    },
    paddingTop: -15,
  },
  // left rect
  preRect: {
    show: true,
    width: 2,
    fill: '#F57F17',
    radius: 2,
  },
  // configurations for the icon
  logoIcon: {
    // whether to show the icon
    show: true,
    x: 0,
    y: 0,
    // the image url for the icon, string type
    img: require('@/assets/star.svg'),
    width: 6,
    height: 6,
    // adjust the offset along x-axis for the icon
    offset: 0,
  },
  // configurations for state icon
  stateIcon: {
    // whether to show the icon
    show: true,
    x: 0,
    y: 0,
    // the image url for the icon, string type
    img: require('@/assets/ok.svg'),
    width: 4,
    height: 4,
    // adjust hte offset along x-axis for the icon
    offset: -5,
  },
  devType: devTypeTerminal,
}

topo.defaultNode = {
  type: 'circle',
  size: 36,
  anchorPoints: [
    [0, 0.5],
    [1, 0.5],
  ],
  style: {
    fill: colorInactive,
  },
  labelCfg: {
    style: {
      fontSize: 7,
      fill: 'black',
    },
  },
}

topo.defaultEdge = {
  type: 'cubic-horizontal',
  color: '#FEAB58',
  style: {
    lineWidth: 1,
    shadowBlur: 100,
    shadowColor: '#FF4654',
  },
}

topo.nodeStateStyles = {
  hover: {
    stroke: 'black',
    lineWidth: 1,
  },
}

topo.xTopData = {}

topo.initTopData = function (id = 'Center-Gateway', name = '中心网关') {
  topo.xTopData = {
    id: id,
    label: name,
    ...topo.centerGwNodeDefault,
    children: [],
  }
  return topo.xTopData
}

topo.addCenterGw = function (info) {
  const children = topo.xTopData.children
  topo.xTopData = { ...topo.centerGwNodeDefault }
  topo.xTopData.children = children
  topo.xTopData.id = info.id
  topo.xTopData.label = info.name
  topo.xTopData.info = info
  topo.xTopData.style.fill = colorActiveCenterGw
}
topo.addEdgeGw = function (info) {
  const edgeGw = { ...topo.edgeGwNodeDefault }
  edgeGw.id = info.id
  edgeGw.label = info.name
  edgeGw.info = info
  edgeGw.style.fill = colorActiveEdgeGw
  edgeGw.children = []
  topo.xTopData.children.push(edgeGw)
  return edgeGw
}
topo.addGroupToGw = function (gw, info) {
  const group = { ...topo.groupNodeDefault }
  group.gwID = gw.id
  group.id = info.GroupName
  group.label = info.GroupName
  group.info = info
  group.style = {}
  group.style.fill = colorActiveGroup
  gw.children.push(group)
}
topo.addGroup = function (gwID, info) {
  for (var gw of topo.xTopData.children) {
    if (gw.id === gwID) {
      topo.addGroupToGw(gw, info)
    }
  }
}

topo.xGroupData = {}

topo.initGroupData = function (gw, info) {
  topo.xGroupData = {
    id: gw.id,
    label: gw.name,
    gw: gw,
    info: info,
    ...topo.edgeGwNodeDefault,
    children: [],
  }
  return topo.xGroupData
}
topo.addTerminalToGroup = function (group, info) {
  const terminal = { ...topo.terminalNodeDefault }
  terminal.id = String(info.Uri)
  terminal.label = info.Uri
  terminal.group = group
  terminal.info = info
  terminal.style = {}
  terminal.style.fill = colorActiveTerminal
  topo.xGroupData.children.push(terminal)
}

export default topo
